<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>销售机会详情 - AI销售管理系统</title>
    <link href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
            min-height: 100vh;
        }
        .glass-card {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 10px;
            padding: 12px 24px;
            transition: all 0.3s ease;
            color: white;
            border: none;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
        }
        .nav-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .progress-bar {
            background: linear-gradient(90deg, #10b981 0%, #8b5cf6 100%);
            border-radius: 10px;
            height: 8px;
            transition: width 0.5s ease;
        }
        .risk-high { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
        .risk-medium { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
        .risk-low { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
        .chart-container {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        }
    </style>
</head>
<body class="min-h-screen">
    <!-- 导航栏 -->
    <nav class="nav-gradient text-white shadow-lg">
        <div class="container mx-auto px-4 py-3">
            <div class="flex justify-between items-center">
                <div class="flex items-center space-x-2">
                    <i class="fas fa-chart-line text-2xl"></i>
                    <span class="text-xl font-bold">AI销售管理系统</span>
                </div>
                <div class="flex items-center space-x-6">
                    <a href="dashboard.html" class="hover:text-blue-200 transition-colors">
                        <i class="fas fa-home mr-1"></i>仪表盘
                    </a>
                    <a href="opportunities.html" class="hover:text-blue-200 transition-colors">
                        <i class="fas fa-bullseye mr-1"></i>销售机会
                    </a>
                    <a href="customers.html" class="hover:text-blue-200 transition-colors">
                        <i class="fas fa-users mr-1"></i>客户管理
                    </a>
                    <a href="analytics.html" class="hover:text-blue-200 transition-colors">
                        <i class="fas fa-chart-bar mr-1"></i>业绩分析
                    </a>
                    <div class="flex items-center space-x-2">
                        <img src="https://via.placeholder.com/32" alt="用户头像" class="w-8 h-8 rounded-full">
                        <span>张经理</span>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <div class="container mx-auto px-4 py-8">
        <!-- 页面标题和操作 -->
        <div class="flex justify-between items-center mb-8">
            <div>
                <h1 class="text-3xl font-bold text-gray-800">销售机会详情</h1>
                <p class="text-gray-600 mt-2">深度分析单个销售机会的转化潜力和风险</p>
            </div>
            <div class="flex space-x-4">
                <button class="btn-primary">
                    <i class="fas fa-edit mr-2"></i>编辑机会
                </button>
                <button class="btn-primary bg-green-500">
                    <i class="fas fa-plus mr-2"></i>新增跟进
                </button>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- 左侧列：基本信息 -->
            <div class="lg:col-span-1 space-y-6">
                <!-- 机会基本信息卡片 -->
                <div class="glass-card p-6">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-xl font-semibold text-gray-800">基本信息</h2>
                        <span class="px-3 py-1 rounded-full bg-blue-100 text-blue-600 text-sm">进行中</span>
                    </div>
                    
                    <div class="space-y-4">
                        <div>
                            <label class="text-gray-600 text-sm">客户名称</label>
                            <p class="font-medium">北京科技有限公司</p>
                        </div>
                        <div>
                            <label class="text-gray-600 text-sm">机会名称</label>
                            <p class="font-medium">企业级CRM系统采购项目</p>
                        </div>
                        <div>
                            <label class="text-gray-600 text-sm">预计金额</label>
                            <p class="font-medium text-2xl text-blue-600">¥ 1,250,000</p>
                        </div>
                        <div>
                            <label class="text-gray-600 text-sm">创建时间</label>
                            <p class="font-medium">2024-01-15</p>
                        </div>
                        <div>
                            <label class="text-gray-600 text-sm">预计成交时间</label>
                            <p class="font-medium">2024-03-20</p>
                        </div>
                        <div>
                            <label class="text-gray-600 text-sm">负责人</label>
                            <p class="font-medium">张经理</p>
                        </div>
                    </div>
                </div>

                <!-- 风险评估卡片 -->
                <div class="glass-card p-6">
                    <h2 class="text-xl font-semibold text-gray-800 mb-4">风险评估</h2>
                    <div class="space-y-4">
                        <div>
                            <div class="flex justify-between mb-2">
                                <span class="text-gray-600">竞争风险</span>
                                <span class="font-medium text-orange-500">中风险</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="risk-medium h-2 rounded-full" style="width: 65%"></div>
                            </div>
                        </div>
                        <div>
                            <div class="flex justify-between mb-2">
                                <span class="text-gray-600">预算风险</span>
                                <span class="font-medium text-green-500">低风险</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="risk-low h-2 rounded-full" style="width: 30%"></div>
                            </div>
                        </div>
                        <div>
                            <div class="flex justify-between mb-2">
                                <span class="text-gray-600">决策风险</span>
                                <span class="font-medium text-red-500">高风险</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="risk-high h-2 rounded-full" style="width: 80%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 中间列：AI预测分析 -->
            <div class="lg:col-span-2 space-y-6">
                <!-- 预测仪表盘 -->
                <div class="glass-card p-6">
                    <h2 class="text-xl font-semibold text-gray-800 mb-6">AI预测分析</h2>
                    
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
                        <div class="text-center">
                            <div class="relative inline-block">
                                <div id="conversionChart" style="width: 120px; height: 120px;"></div>
                                <div class="absolute inset-0 flex items-center justify-center">
                                    <span class="text-2xl font-bold text-blue-600">78%</span>
                                </div>
                            </div>
                            <p class="text-gray-600 mt-2">转化概率</p>
                        </div>
                        
                        <div class="text-center">
                            <div class="relative inline-block">
                                <div id="timelineChart" style="width: 120px; height: 120px;"></div>
                                <div class="absolute inset-0 flex items-center justify-center">
                                    <span class="text-2xl font-bold text-green-600">85%</span>
                                </div>
                            </div>
                            <p class="text-gray-600 mt-2">时间预测准确率</p>
                        </div>
                        
                        <div class="text-center">
                            <div class="relative inline-block">
                                <div id="confidenceChart" style="width: 120px; height: 120px;"></div>
                                <div class="absolute inset-0 flex items-center justify-center">
                                    <span class="text-2xl font-bold text-purple-600">92%</span>
                                </div>
                            </div>
                            <p class="text-gray-600 mt-2">AI置信度</p>
                        </div>
                    </div>

                    <!-- 跟进建议 -->
                    <div class="bg-blue-50 rounded-lg p-4">
                        <h3 class="font-semibold text-blue-800 mb-2">
                            <i class="fas fa-lightbulb mr-2"></i>AI跟进建议
                        </h3>
                        <p class="text-blue-700">建议在本周内安排技术演示会议，重点展示CRM系统的数据分析功能。根据客户行为分析，他们对数据可视化功能表现出较高兴趣。</p>
                    </div>
                </div>

                <!-- 跟进记录 -->
                <div class="glass-card p-6">
                    <div class="flex justify-between items-center mb-6">
                        <h2 class="text-xl font-semibold text-gray-800">跟进记录</h2>
                        <button class="btn-primary bg-green-500 text-sm">
                            <i class="fas fa-plus mr-1"></i>新增记录
                        </button>
                    </div>
                    
                    <div class="space-y-4">
                        <div class="border-l-4 border-blue-500 pl-4 py-2">
                            <div class="flex justify-between">
                                <span class="font-medium">技术需求沟通</span>
                                <span class="text-gray-500 text-sm">2024-02-10</span>
                            </div>
                            <p class="text-gray-600 mt-1">与客户IT部门负责人进行了深入的技术需求沟通，确认了系统集成需求。</p>
                            <div class="flex items-center mt-2 text-sm text-gray-500">
                                <i class="fas fa-user mr-1"></i>张经理
                                <i class="fas fa-clock ml-3 mr-1"></i>45分钟
                            </div>
                        </div>
                        
                        <div class="border-l-4 border-green-500 pl-4 py-2">
                            <div class="flex justify-between">
                                <span class="font-medium">初步方案演示</span>
                                <span class="text-gray-500 text-sm">2024-02-05</span>
                            </div>
                            <p class="text-gray-600 mt-1">向客户展示了初步解决方案，获得了积极反馈，客户对AI预测功能表示浓厚兴趣。</p>
                            <div class="flex items-center mt-2 text-sm text-gray-500">
                                <i class="fas fa-user mr-1"></i>张经理
                                <i class="fas fa-clock ml-3 mr-1"></i>90分钟
                            </div>
                        </div>
                        
                        <div class="border-l-4 border-purple-500 pl-4 py-2">
                            <div class="flex justify-between">
                                <span class="font-medium">初次接触</span>
                                <span class="text-gray-500 text-sm">2024-01-20</span>
                            </div>
                            <p class="text-gray-600 mt-1">通过客户推荐获得商机，初步了解了客户的业务痛点和需求。</p>
                            <div class="flex items-center mt-2 text-sm text-gray-500">
                                <i class="fas fa-user mr-1"></i>张经理
                                <i class="fas fa-clock ml-3 mr-1"></i>30分钟
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 相关文档 -->
        <div class="glass-card p-6 mt-6">
            <h2 class="text-xl font-semibold text-gray-800 mb-4">相关文档附件</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <div class="border rounded-lg p-4 hover:shadow-md transition-shadow">
                    <div class="flex items-center mb-2">
                        <i class="fas fa-file-pdf text-red-500 text-2xl mr-3"></i>
                        <div>
                            <p class="font-medium">技术方案书.pdf</p>
                            <p class="text-gray-500 text-sm">2.3 MB</p>
                        </div>
                    </div>
                    <button class="w-full mt-2 py-2 bg-gray-100 rounded text-sm hover:bg-gray-200 transition-colors">
                        <i class="fas fa-download mr-1"></i>下载
                    </button>
                </div>
                
                <div class="border rounded-lg p-4 hover:shadow-md transition-shadow">
                    <div class="flex items-center mb-2">
                        <i class="fas fa-file-excel text-green-500 text-2xl mr-3"></i>
                        <div>
                            <p class="font-medium">报价单.xlsx</p>
                            <p class="text-gray-500 text-sm">1.1 MB</p>
                        </div>
                    </div>
                    <button class="w-full mt-2 py-2 bg-gray-100 rounded text-sm hover:bg-gray-200 transition-colors">
                        <i class="fas fa-download mr-1"></i>下载
                    </button>
                </div>
                
                <div class="border rounded-lg p-4 hover:shadow-md transition-shadow">
                    <div class="flex items-center mb-2">
                        <i class="fas fa-file-word text-blue-500 text-2xl mr-3"></i>
                        <div>
                            <p class="font-medium">合同草案.docx</p>
                            <p class="text-gray-500 text-sm">3.2 MB</p>
                        </div>
                    </div>
                    <button class="w-full mt-2 py-2 bg-gray-100 rounded text-sm hover:bg-gray-200 transition-colors">
                        <i class="fas fa-download mr-1"></i>下载
                    </button>
                </div>
                
                <div class="border rounded-lg p-4 hover:shadow-md transition-shadow">
                    <div class="flex items-center mb-2">
                        <i class="fas fa-image text-purple-500 text-2xl mr-3"></i>
                        <div>
                            <p class="font-medium">演示截图.png</p>
                            <p class="text-gray-500 text-sm">4.7 MB</p>
                        </div>
                    </div>
                    <button class="w-full mt-2 py-2 bg-gray-100 rounded text-sm hover:bg-gray-200 transition-colors">
                        <i class="fas fa-download mr-1"></i>下载
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 初始化图表
        document.addEventListener('DOMContentLoaded', function() {
            // 转化概率图表
            const conversionChart = echarts.init(document.getElementById('conversionChart'));
            conversionChart.setOption({
                series: [{
                    type: 'pie',
                    radius: ['70%', '90%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false
                    },
                    data: [
                        {value: 78, name: '转化概率', itemStyle: {color: '#4f46e5'}},
                        {value: 22, name: '剩余', itemStyle: {color: '#e2e8f0'}}
                    ]
                }]
            });

            // 时间预测准确率图表
            const timelineChart = echarts.init(document.getElementById('timelineChart'));
            timelineChart.setOption({
                series: [{
                    type: 'pie',
                    radius: ['70%', '90%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false
                    },
                    data: [
                        {value: 85, name: '准确率', itemStyle: {color: '#10b981'}},
                        {value: 15, name: '误差', itemStyle: {color: '#e2e8f0'}}
                    ]
                }]
            });

            // AI置信度图表
            const confidenceChart = echarts.init(document.getElementById('confidenceChart'));
            confidenceChart.setOption({
                series: [{
                    type: 'pie',
                    radius: ['70%', '90%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false
                    },
                    data: [
                        {value: 92, name: '置信度', itemStyle: {color: '#8b5cf6'}},
                        {value: 8, name: '不确定性', itemStyle: {color: '#e2e8f0'}}
                    ]
                }]
            });

            // 响应式调整
            window.addEventListener('resize', function() {
                conversionChart.resize();
                timelineChart.resize();
                confidenceChart.resize();
            });
        });
    </script>
</body>
</html>
